class Cart {
  constructor() {
    //如果之前已经买过，就是购物车数据已经存在,把之前的购物车数据取出来
    if (localStorage.getItem("cartData")) {
      this.cartData = JSON.parse(localStorage.getItem("cartData"));
    } else {
      this.cartData = {};
    }
  }
  //存
  saveData(pid, num, ter) {
    //如果之前没有买过该种商品，给this.cartData添加一个pid，值为num
    //如果之前买过该种商品，在原来的基础上加num
    //ter 表示的是num是最终值还是累加值
    if (this.cartData[pid] == undefined || ter) {
      this.cartData[pid] = num;
    } else {
      this.cartData[pid] += num;
    }
    localStorage.setItem("cartData", JSON.stringify(this.cartData), 0);

  }
  show(id) {
    //存购物车列表的DOM对象
    let cartUl = document.getElementById(id);
    //取商品数据
    let productData = JSON.parse(localStorage.getItem("productData"));
    //从商品数据里找到购物车数据里相同的商品id的信息
    //遍历this.cartData
    let str = "";
    for (let pid in this.cartData) {
      //console.log(pid);
      let data = productData.find(item => item.id == pid);
      //console.log(data);
      str += `
      <li class="list" data-id="${pid}">
      <input type="checkBox" class="ck">
      <img src="${data.pimg}">
      <span>${data.pname}</span>
      <span class="jian">-</span>
      <input type="text" value="${this.cartData[pid]}" class="num">
      <span class="jia">+</span>
      <span class="dprice">${data.pprice}</span>
      <span class="dzprice">${this.cartData[pid]*data.pprice}</span>
      <span class="del">删除</span>
      </li>
      `;
    }
    cartUl.innerHTML = str;

    let checkAll = document.getElementById("checkAll"); //全选复选框
    this.lists = document.querySelectorAll(".list") //购物车列表
    this.cks = document.querySelectorAll(".ck"); //单个复选框
    this.jians = document.querySelectorAll(".jian"); //减号
    this.nums = document.querySelectorAll(".num"); //数量
    this.jias = document.querySelectorAll(".jia"); //加号
    this.dprices = document.querySelectorAll(".dprice"); //单价
    this.dzprices = document.querySelectorAll(".dzprice"); //单个总价
    this.dels = document.querySelectorAll(".del"); //删除
    this.totalPrice = document.getElementById("totalPrice"); //总价
    //全选和不全选
    //点击全选复选框 ，单个复选框的选中状态和其保持一致
    checkAll.onclick = () => {
      //由于在事件处理函数里，要用到实例属性（this）
      for (let i = 0; i < this.cks.length; i++) {
        this.cks[i].checked = checkAll.checked;
      }
      this.getTotalPrice();
    }
    //点击单个复选框时，判断选中的单个复选框的数量和所有的单个复选框的数量是否一致
    //一致的话，全选复选框选中
    //不一致的话，全选复选框不选中
    for (let i = 0; i < this.cks.length; i++) {
      this.cks[i].onclick = () => {
        let count = 0; //计数器
        for (let j = 0; j < this.cks.length; j++) {
          if (this.cks[j].checked) {
            count++; //有选中的加1
          }
        }
        //循环结束之后，count的值就是选中的数量
        //定位bug,解决bug
        if (count == this.cks.length) {
          checkAll.checked = true;
        } else {
          checkAll.checked = false;
        }
        this.getTotalPrice();
      }
    }

    for (let i = 0; i < this.lists.length; i++) {
      //减号
      this.jians[i].onclick = () => {
        this.nums[i].value--;
        if (this.nums[i].value < 1) {
          this.nums[i].value = 1;
        }
        this.updateData(i)
      }

      //加号
      this.jias[i].onclick = () => {
        this.nums[i].value++;
        this.updateData(i)
      }

      //数量
      this.nums[i].onblur = () => {
        if (this.nums[i].value < 1) {
          this.nums[i].value = 1;
        }
        this.updateData(i);
      }

      //删除
      this.dels[i].onclick = () => {
        this.delData(i);
      }

    }
  }

  updateData(i) {
    //调用存数据的方法
    let pid = this.lists[i].getAttribute("data-id");
    this.saveData(pid, +this.nums[i].value, true);
    //单个总价变化
    this.dzprices[i].innerText = this.dprices[i].innerText * this.nums[i].value;
    //总价 变化
    this.getTotalPrice();
  }
  getTotalPrice() {
    //总价的变化 所有勾选的商品的单个总价之后
    let he = 0;
    for (let j = 0; j < this.cks.length; j++) {
      if (this.cks[j].checked) {
        he += Number(this.dzprices[j].innerText);
      }
    }
    this.totalPrice.innerText = he;
  }
  delData(i) {
    //移除节点
    this.lists[i].remove();
    //删数据 this.cartData里的键值对 
    let pid = this.lists[i].getAttribute("data-id");
    delete this.cartData[pid];
    localStorage.setItem("cartData", JSON.stringify(this.cartData));
    this.cks[i].checked = false; //状态改了，改的原因，虽然节点移除了，但是我们还米能取到，选中的状态还在，还会计算进去
    this.getTotalPrice();
  }
}